<template>
  <div class="card-detail-container" v-title :data-title="$route.query.name">
    <div class="top">
      <img class="card-img" :src="cardInfo.creditcardImg" v-if="cardInfo.creditcardImg && !defaultImgShow"
           @error="defaultImgShow=true"/>
      <default-img class="card-img" v-if="!cardInfo.creditcardImg||defaultImgShow"></default-img>
      <div class="card-name">{{cardInfo.creditcardName}}</div>
      <div class="desc"><span v-for="item in cardInfo.creditcardTrait">{{item}}</span></div>
    </div>
    <div class="middle">
      <div class="benifit">权益</div>
      <ul class="content">
        <li class="content-item" v-for="item in cardInfo.productRights">
          <div class="item-name">{{item.equity}}</div>
          <div class="item-desc">{{item.explain}}</div>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <button class="apply-btn" @click="applyClick">
        立即申请
      </button>
      <div class="instruction">
        *具体内容请以银行信用卡中心公布为准
      </div>
    </div>
    <fail-modal ref="fail"></fail-modal>
  </div>
</template>
<script>
  import {httpReq} from '@/common/api'
  import DefaultImg from '@/components/defaultImg'
  import FailModal from '@/components/failed.vue'
  export default {
    name: 'creditcardDetail',
    data() {
      return {
        cardInfo: {},
        defaultImgShow: false
      }
    },
    components: {
      DefaultImg,FailModal
    },
    methods: {
      getCardDetails() {
        httpReq('GET', `/list/as/app/financial/creditcard/${this.$route.query.id}`).then((res) => {
          this.cardInfo = res;
        }).catch((err) => {
          this.$toast(err);
        })
      },
      applyClick() {
        httpReq('POST', `/list/as/app/financial/api/creditcard/${this.$route.query.id}/preLoanApplication`).then((res) => {
          switch (res.result) {
            case 0:
              //申请成功跳转第三方
              const url = this.cardInfo.creditcardUrl;
              if (url) {
                window.location.href = url
              }
              break;
            case 1:
              //需要完善资料
              this.$router.push({
                name: 'detailInfo',
                query: {
                  comeFrom: 1,
                  productId: this.$route.query.id
                }
              });
              break;
            case 2:
              //申请失败
              this.$refs.fail.confirm().then((res)=>{
                if(res==='resubmit'){
                  this.applyClick()
                }
              })
                  break;
            default:
              break
          }
        }).catch((err)=>{
          this.$toast(err);
          this.$refs.fail.confirm().then((res)=>{
            if(res==='resubmit'){
              this.applyClick()
            }
          })
        })

      }
    },
    mounted() {
      this.getCardDetails()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import '~style/mixins.styl'
  .card-detail-container
    background-color $bgColor
    position absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    .top
      background-color white
      display flex
      flex-direction column
      align-items center
      padding .3rem 0
      .card-img
        width 5.6rem
        height 3.52rem
        margin-bottom .18rem
      .card-name
        color $darkTextColor
        font-size .32rem
        font-weight bold
        line-height .46rem
      .desc
        color $disabledText
        margin-top .1rem
        font-size .26rem
        span + span
          margin-left .2rem
    .middle
      border-radius .08rem
      margin .2rem
      padding .24rem .3rem
      background-color white
      .benifit
        font-size .34rem
        color $darkTextColor
        font-weight bold
      .content
        list-style disc
        margin-top .2rem
        margin-left .4rem
        .content-item + .content-item
          margin-top .2rem
        .item-name
          color #3B3B3B
          font-size .32rem
          font-weight bold
          line-height .46rem
        .item-desc
          margin-top .14rem
          color #666666
          line-height .4rem
    .bottom
      margin .3rem .2rem
      .apply-btn
        width 100%
        color white
        border-radius .08rem
        height .88rem
        line-height .88rem
        font-size .32rem
        background: linear-gradient(to right, $gradientDeep, $gradientTint)
      .instruction
        text-align center
        font-size .24rem
        color $disabledText
        margin .24rem 0
        padding-bottom .24rem;
</style>
